<template>
  <div class="addmeal">
    <el-dialog title="新建套餐" :visible.sync="dialogVisible" width="900px">
      <el-form :data="addFrom" style="margin-left: -30px">
        <el-form-item :label-width="formLabelWidth">
          <span><span class="xin">*</span>套餐名称:</span>
          <el-input
            v-model="addFrom.name"
            style="width: 200px"
            placeholder="请输入套餐名称"
          ></el-input>
          <span style="padding-left: 220px"
            ><span class="xin">*</span>套餐分类:</span
          >
          <el-select
            v-model="addFrom.categoryId"
            style="width: 200px"
            placeholder="请选择套餐分类"
          >
            <el-option v-for="item in catedata" :key="item.id"
             :label="item.name" :value="item.id">{{item.name}}</el-option>

          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <span><span class="xin">*</span>套餐价格:</span>
          <el-input
            v-model="addFrom.price"
            style="width: 200px"
            placeholder="请输入套餐价格"
          ></el-input>
        </el-form-item>

         <!-- 上传图片 -->
        <el-form-item style="width: 80%" :label-width="formLabelWidth">
          <div style="display: flex">
            <span style="padding-right: 40px"
              ><span class="xin">*</span>菜品图片:</span
            >

            <el-upload
            :disabled="disabled"
              class="avatar-uploader"
              action="http://localhost:8080/admin/dish/upload"
              :file-list="fileList"

              :limit="limit"
              :drag="true"

              :before-upload="beforeAvatarUpload"
              :on-preview="handlePictureCardPreview"
              :on-success="handleSuccess"
               @mouseenter.native="handleMouseEnter"
               @mouseleave.native="handleMouseLeave"

              name="image"
            >

              <div  class="img_icon" v-show="isshow">
                  <i   @click="handleRemove" class="el-icon-delete"></i>
                  <i @click="handlezoom"  class="el-icon-zoom-in"></i>

                </div>
              <img  v-if="addFrom.image" :src="addFrom.image" class="avatar" />

              <i v-else class="el-icon-plus avatar-uploader-icon"></i>

            </el-upload>
             <!-- 图标弹窗蒙层 -->

            <!-- 展示删除图片和放大的效果 -->

            <!-- 备注 -->
            <div style="padding-left: 20px; margin-top: -10px">
              <p>图片大小不超过2M </p>
              <p>仅能上传PNG JPEG JPG类型图片 </p>
              <p>建议上传200*200的图片 </p>
            </div>
          </div>
        </el-form-item>

        <!-- 套餐描述 -->

        <el-form-item :label-width="formLabelWidth" style="display: flex">
          <div><span>套餐描述:</span></div>
          <div style="margin-left:80px;margin-top:-40px">
            <el-input
              :rows="3"
              style="width: 700px"
              v-model="addFrom.description"
              type="textarea"
              placeholder="套餐描述，最长200字"
              maxlength="200"
            ></el-input>
          </div>
        </el-form-item>

        <div style="padding-top:10px;margin-left:100px">
          <el-button
            @click="savehandler(addFrom)"
            style="margin-left: 120px; width: 150px"
            type="primary"
            >保存</el-button
          >
          <el-button
            @click="cancel"
            style="margin-left: 300px; width: 150px"
            type="info"
            >取消</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Bus3 from '@/utils/EventBus'
import { addSetmeal } from '@/api/setmeal'

export default {
  name: 'addmealIndex',

  data () {
    return {
      disabled: false, // 禁用上传按钮
      limit: 1,
      isshow: false,
      catedata: '',
      taste: '', // 味道
      tastelist: ['无糖x'],
      addFrom: {
        name: '',
        categoryId: '',
        price: '',
        image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi3%2F2208923118253%2FO1CN01wS45wf2ApvRIeHv8i_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1727020691&t=b5fdc281987e1cc0c201797bf8e1af13',
        description: '',
        status: 1

      }, // 弹窗数据
      fileList: [],
      dialogVisible: false,
      formLabelWidth: '80px'

    }
  },
  created () {
    Bus3.$on('sendMsg3', (dialogVisible, catedata) => {
      this.dialogVisible = dialogVisible
      this.catedata = catedata
      console.log(dialogVisible, 'msg')
    })
  },
  beforeDestroy () {
    Bus3.$off('sendMsg3')
  },
  methods: {
    async savehandler (addFrom) {
      console.log(addFrom, 'addFrom')
      await addSetmeal(addFrom)
      location.reload() // 刷新
    },

    // 取消
    cancel () {
      this.dialogVisible = false
      this.addFrom = ''
    },
    addtaste () {
      // 添加口味
      if (this.tastelist.length > 6) {
        this.$message.error('添加口味数量超出最大值')
        return
      }
      if (this.taste.length > 3) {
        this.$message.error('口味名字不能超过3个')
        return
      }
      if (this.taste === '') {
        this.$message.error('口味名字不能为空')
        return
      }
      this.tastelist.push(this.taste)
    },
    deltaste () {
      if (this.tastelist.length > 0) {
        // 删除口味
        this.tastelist.shift()
        this.$message.success('删除成功')
        if (this.tastelist.length === 0) {
          this.$message.success('已全部删除')
        }
      } else {
        this.$message.error('已全部删除')
      }
    },

    //  图片处理

    // 图片处理
    handlePreview (file) {
      this.addFrom.image = file
    },
    handleSuccess (response, file, fileList) {
      // 假设服务器返回的结果中包含图片路径的属性是 'url'
      console.log('图片路径:', response)
      this.addFrom.image = response.data
    },
    // 删除图片
    handleRemove (file, fileList) {
      this.disabled = true

      this.addFrom.image = ''
      this.limit = this.limit + 1
      console.log(file)
      this.isshow = false
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleMouseEnter () {
      // 上传时鼠标移入事件
      this.isshow = true
      // console.log('+++++++++++', 'event')
    },
    handleMouseLeave () {
      // 处理鼠标移出逻辑
      this.isshow = false
      this.disabled = false
      // console.log('Mouse left the upload area.')
    },
    // 放大图片
    handlezoom () {
      this.disabled = true
      this.dialogVisibleimg = true
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG和PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="less" secped>
.el-button btu1 el-button--info {
  margin-left: 10%;
}
.xin {
  color: red;
  padding-right: 2px;
}
.el-input {
  padding-left: 10px;
}
// 口味做法配置
.dish_txt {
  width: 650px;
  height: 180px;
  margin-top: -6%;
  margin-left: 10.5%;
  /* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  box-shadow: 0px 0px 10px rgba(184, 14, 14, 0.058);
  border-radius: 5px;
}
.tasteArr {
  width: 60%;
  padding-left: 5px;
  border: 1px solid rgba(0, 0, 0, 0.103);
  margin-left: 30px;
  border-radius: 5px;
  display: flex;
}
.tasteArr_span {
  font-size: 12px;
  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;

  margin-left: 10px;
  color: rgb(243, 218, 106);
  border: 1px solid rgb(243, 218, 106);
}

/* 图片上传 */

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: -25px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 120px;
  line-height: 178px;
  text-align: center;
  margin-top: 80px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
p {
  font-size: 12px;
}
</style>
